<template>
	<el-dialog
		:title="fileTitle"
		:visible.sync="fileAddComShow"
		width="70%"
		:before-close="cancel"
		:append-to-body="false"
	>
		<!-- 头部 -->
		<el-table :data="list" border style="width: 100%">
			<template v-for="(item, index) in headerList">
				<el-table-column
					:key="index + 'b'"
					prop="name"
					:label="item.title"
					:width="item.title === '更新重大事项临时报告' ? '200' : ''"
				>
					<template :slot-scope="{ row: item }">
						<el-button @click="updateShow(item.title)" type="primary">{{
							item.title
						}}</el-button>
					</template>
				</el-table-column>
			</template>
		</el-table>

		<!-- 列表 -->
		<h3>文件列表</h3>
		<el-table :data="fileRenewApplyList" border class="clls" style="width: 100%">
			<el-table-column prop="typeName" label="名称">
				<template slot-scope="scope">
					<!-- 公募 -->
					<span v-if="scope.row.fileRenewCode === 'upfundContract'"
						>更新基金合同文件</span
					>
					<span v-if="scope.row.fileRenewCode === 'uptrustAgreement'"
						>更新托管协议文件</span
					>
					<span v-if="scope.row.fileRenewCode === 'upenlistExplain'"
						>更新招募说明书文件</span
					>
					<span v-if="scope.row.fileRenewCode === 'upenlistExplainRemark'"
						>更新招募说明书摘要</span
					>
					<span v-if="scope.row.fileRenewCode === 'others'">更新其他文档</span>
					<!-- 专户 -->
					<span v-if="scope.row.fileRenewCode === 'quarterly'">更新季报</span>
					<span v-if="scope.row.fileRenewCode === 'annual'">更新年报</span>
					<span v-if="scope.row.fileRenewCode === 'matters'">更新重大事项临时报告</span>
					<span v-if="scope.row.fileRenewCode === 'liquidation'">更新清算报告</span>
					<span v-if="scope.row.fileRenewCode === 'contract'">更新更新合同</span>
					<span v-if="scope.row.fileRenewCode === 'plant'">更新计划说明书</span>
					<span v-if="scope.row.fileRenewCode === 'risk'">更新风险揭示书</span>
					<span v-if="scope.row.fileRenewCode === 'supplement'">更新补充协议</span>
					<span v-if="scope.row.fileRenewCode === 'others'">更新其他文档</span>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="生效时间">
				<template slot-scope="scope">
					<div v-if="!!scope.row.firstEffectiveDate">
						word版：{{ scope.row.firstEffectiveDate | timerConversionStr }}
					</div>
					<div v-if="!!scope.row.sealedEffectiveDate">
						盖章版：{{ scope.row.sealedEffectiveDate | timerConversionStr }}
					</div>
					<div v-if="!!scope.row.finalEffectiveDate">
						PDF版：{{ scope.row.finalEffectiveDate | timerConversionStr }}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="操作">
				<template slot-scope="scope">
					<div class="items" style="border: none">
						<el-button size="mini" type="primary" @click="fileClick(scope.row, '查看')"
							>查看</el-button
						>
						<el-button size="mini" type="primary" @click="fileClick(scope.row, '下载')"
							>下载</el-button
						>
						<el-button
							size="mini"
							type="danger"
							class="delebtn"
							@click="fileClick(scope.row, '删除', scope.$index + 1)"
							>删除</el-button
						>
						<el-button
							size="mini"
							type="primary"
							@click="updateShow('更新', scope.row, scope.$index + 1)"
							>更新</el-button
						>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 上传组件 -->
		<el-dialog
			:title="title"
			:visible.sync="updateAddComShow"
			width="30%"
			:before-close="updateCancel"
			:append-to-body="true"
		>
			<el-form label-width="120px">
				<el-form-item label="生效时间：">
					<el-date-picker
						type="date"
						value-format="yyyy-MM-dd"
						format="yyyy-MM-dd"
						placeholder="选择日期"
						v-model="date1"
					></el-date-picker>
				</el-form-item>
				<el-form-item label=" ">
					<div class="updateClass">
						<el-upload
							action="https://jsonplaceholder.typicode.com/posts/"
							:show-file-list="false"
							:http-request="toUploadFile"
							:limit="1"
							:file-list="fileList"
						>
							<el-button
								size="mini"
								type="primary"
								@click.native="updateClick('word版')"
								><i class="el-icon-upload"></i> word版</el-button
							>
						</el-upload>
						<el-upload
							action="https://jsonplaceholder.typicode.com/posts/"
							:show-file-list="false"
							:http-request="toUploadFile"
							:limit="1"
							:file-list="fileList"
						>
							<el-button
								size="mini"
								type="primary"
								@click.native="updateClick('盖章版')"
								><i class="el-icon-upload"></i> 盖章版</el-button
							>
						</el-upload>
						<el-upload
							action="https://jsonplaceholder.typicode.com/posts/"
							:show-file-list="false"
							:http-request="toUploadFile"
							:limit="1"
							:file-list="fileList"
						>
							<el-button
								size="mini"
								type="primary"
								@click.native="updateClick('PDF版')"
								><i class="el-icon-upload"></i> PDF版</el-button
							>
						</el-upload>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button
					@click="updateCancel"
					size="mini"
					type="primary"
					style="margin: 2px 20px 0 0"
					>取 消</el-button
				>
			</span>
		</el-dialog>

		<!-- 操作文件 -->
		<el-dialog
			title="文件操作"
			:visible.sync="addComShowFile"
			width="20%"
			:before-close="cancelFile"
			:append-to-body="true"
		>
			<el-button
				size="mini"
				:disabled="!!!fileObj.firstFileId"
				type="primary"
				@click.native="fileOperationFunc('word版')"
				><i class="el-icon-upload"></i> word版</el-button
			>
			<el-button
				size="mini"
				:disabled="!!!fileObj.sealedFileId"
				type="primary"
				@click.native="fileOperationFunc('盖章版')"
				><i class="el-icon-upload"></i> 盖章版</el-button
			>
			<el-button
				size="mini"
				:disabled="!!!fileObj.finalFileId"
				type="primary"
				@click.native="fileOperationFunc('PDF版')"
				><i class="el-icon-upload"></i> PDF版</el-button
			>
		</el-dialog>

		<div slot="footer" class="dialog-footer">
			<el-button size="mini" type="primary" @click="save">保 存</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { getFundFile, saveUpdateFile } from '@/api/productApi/infoMain'
import { uploadFileAndSort, downloadFile, openFile } from '@/api/productApi/file'
import Vue from 'vue'
import { timerConversionDate } from '@/filters'
export default {
	props: {
		fileAddComShow: {
			type: Boolean,
			default: false
		},
		fileComIsShow: {
			type: Function,
			default: Function
		},
		fileTitle: {
			type: String,
			default: '文件更新'
		}
	},
	data() {
		return {
			listMsgPublic: [
				{ title: '更新基金合同', fileRenewCode: 'upfundContract' },
				{ title: '更新托管协议', fileRenewCode: 'uptrustAgreement' },
				{ title: '更新招募说明书', fileRenewCode: 'upenlistExplain' },
				{ title: '更新产品资料概要', fileRenewCode: 'upenlistExplainRemark' },
				{ title: '更新其他文档', fileRenewCode: 'others' }
			],
			listMsgSepl: [
				{ title: '更新季报', fileRenewCode: 'quarterly' },
				{ title: '更新年报', fileRenewCode: 'annual' },
				{ title: '更新重大事项临时报告', fileRenewCode: 'matters' },
				{ title: '更新清算报告', fileRenewCode: 'liquidation' },
				{ title: '更新更新合同', fileRenewCode: 'contract' },
				{ title: '更新计划说明书', fileRenewCode: 'plant' },
				{ title: '更新风险揭示书', fileRenewCode: 'risk' },
				{ title: '更新补充协议', fileRenewCode: 'supplement' },
				{ title: '更新其他文档', fileRenewCode: 'others' }
			],
			list: [{ name: '1' }],
			headerList: [],
			fileRenewApplyList: [],
			updateAddComShow: false,
			title: '',
			fileTypeMsg: '', // 文件上传类型
			fileObj: {},
			fileList: [],
			date1: new Date(),
			addComShowFile: false,
			fundSysCode: '',
			fundType: '',
			tabIndex: null,
			fileOperType: '' // 文件操作类型
		}
	},
	methods: {
		// 文件操作
		fileOperationFunc(type) {
			if (type === 'word版') {
				this.fileoper(this.fileObj.firstFileId, type)
			}
			if (type === '盖章版') {
				this.fileoper(this.fileObj.sealedFileId, type)
			}
			if (type === 'PDF版') {
				this.fileoper(this.fileObj.finalFileId, type)
			}
		},
		fileoper(id, type) {
			if (this.fileOperType === '下载') {
				this.downloadFileFunc(id)
			} else if (this.fileOperType === '查看') {
				this.fileSee(id)
			} else if (this.fileOperType === '删除') {
				if (type === '盖章版') {
					Vue.delete(this.fileRenewApplyList[this.tabIndex - 1], 'sealedEffectiveDate')
					Vue.delete(this.fileRenewApplyList[this.tabIndex - 1], 'sealedFileId')
					Vue.delete(this.fileRenewApplyList[this.tabIndex - 1], 'sealedTDate')
				} else if (type === 'word版') {
					Vue.delete(this.fileRenewApplyList[this.tabIndex - 1], 'firstEffectiveDate')
					Vue.delete(this.fileRenewApplyList[this.tabIndex - 1], 'firstFileId')
					Vue.delete(this.fileRenewApplyList[this.tabIndex - 1], 'firstTDate')
				} else if (type === 'PDF版') {
					Vue.delete(this.fileRenewApplyList[this.tabIndex - 1], 'finalEffectiveDate')
					Vue.delete(this.fileRenewApplyList[this.tabIndex - 1], 'finalFileId')
					Vue.delete(this.fileRenewApplyList[this.tabIndex - 1], 'finalTDate')
				}
				this.fileRenewApplyList.forEach((item, index) => {
					if (!item.firstFileId && !item.sealedFileId && !item.finalFileId) {
						this.fileRenewApplyList.splice(index, 1)
					}
				})
				this.$message({ type: 'success', message: '删除成功' })
			}
			this.cancelFile()
		},

		// 文件查看
		fileSee(id) {
			openFile(id)
		},

		// 文件下载
		downloadFileFunc(id) {
			downloadFile({ fid: id }).then(item => {
				if (item.msgCode === 'N') {
					this.$message({ showClose: true, message: '文件不存在', type: 'error' })
					return
				}
				if (item) {
					window.open(`/update/download.do?fid=${id}`)
					this.$message({ showClose: true, message: '正在下载，请稍等......', type: 'success' })
				}
			})
		},

		// 文件操作组件
		cancelFile() {
			this.addComShowFile = !this.addComShowFile
			if (!this.addComShowFile) {
				this.clearData()
			}
		},

		// 保存
		save() {
			if (!this.fileRenewApplyList.length) {
				this.$message({ type: 'warning', message: '暂无可保存的文件' })
				return
			}
			const obj = {
				fundSysCode: this.fundSysCode,
				fundRaiseType: this.fundType,
				fileRenewInfoList: this.fileRenewApplyList
			}
			saveUpdateFile(obj).then(res => {
				if (res.msgCode === 'Y') {
					this.$message({ type: 'success', message: res.msg })
					this.cancel()
				}
			})
		},

		fileClick(obj, type, index) {
			// 操作类型
			this.fileObj = obj
			this.fileOperType = type
			if (index) {
				this.tabIndex = index
			}
			this.cancelFile()
		},

		updateShow(title, obj, index) {
			// 上传组件显隐
			if (obj) {
				this.fileObj = obj
				this.tabIndex = index
			}
			this.title = obj ? '文件更新' : `${title}-文件上传`
			this.updateCancel()
		},

		updateCancel() {
			this.updateAddComShow = !this.updateAddComShow
		},

		// 清空选项
		clearData() {
			this.fileTypeMsg = ''
			this.fileObj = {}
			this.title = ''
			this.fileList = []
			this.tabIndex = null
			this.fileOperType = ''
		},

		// 上传
		toUploadFile(params) {
			uploadFileAndSort(params).then(res => {
				if (res.msgCode === 'Y') {
					if (this.tabIndex) {
						this.fileRenewApplyList.forEach((item, index) => {
							if (this.tabIndex - 1 === index) {
								const obj = this.fileParams(this.fileTypeMsg, res.obj, this.date1 ? this.date1 : new Date())
								if (this.fileTypeMsg === 'word版') {
									this.$set(item, 'firstEffectiveDate', obj.firstEffectiveDate)
									this.$set(item, 'firstTDate', obj.firstTDate)
									this.$set(item, 'firstFileId', obj.firstFileId)
								} else if (this.fileTypeMsg === '盖章版') {
									this.$set(item, 'sealedEffectiveDate', obj.sealedEffectiveDate)
									this.$set(item, 'sealedFileId', obj.sealedFileId)
									this.$set(item, 'sealedTDate', obj.sealedTDate)
								} else if (this.fileTypeMsg === 'PDF版') {
									this.$set(item, 'finalEffectiveDate', obj.finalEffectiveDate)
									this.$set(item, 'finalFileId', obj.finalFileId)
									this.$set(item, 'finalTDate', obj.finalTDate)
								}
							}
						})
					} else {
						let fileRenewCode = ''
						this.headerList.forEach(item => {
							if (this.title.includes(item.title)) {
								fileRenewCode = item.fileRenewCode
							}
						})
						const item = {
							fundSysCode: this.fundSysCode,
							fileRenewCode
						}
						const obj = this.fileParams(this.fileTypeMsg, res.obj, this.date1 ? this.date1 : new Date())
						if (this.fileTypeMsg === 'word版') {
							this.$set(item, 'firstEffectiveDate', obj.firstEffectiveDate)
							this.$set(item, 'firstTDate', obj.firstTDate)
							this.$set(item, 'firstFileId', obj.firstFileId)
						} else if (this.fileTypeMsg === '盖章版') {
							this.$set(item, 'sealedEffectiveDate', obj.sealedEffectiveDate)
							this.$set(item, 'sealedFileId', obj.sealedFileId)
							this.$set(item, 'sealedTDate', obj.sealedTDate)
						} else if (this.fileTypeMsg === 'PDF版') {
							this.$set(item, 'finalEffectiveDate', obj.finalEffectiveDate)
							this.$set(item, 'finalFileId', obj.finalFileId)
							this.$set(item, 'finalTDate', obj.finalTDate)
						}
						this.fileRenewApplyList.push(item)
					}
					this.$message({ type: 'success', message: `${this.title}-${this.fileTypeMsg}-文件上传成功` })
					this.updateCancel()
					this.clearData()
				}
			})
		},

		updateClick(title) {
			// 上传类型
			this.fileTypeMsg = title
		},

		cancel() {
			this.$emit('fileComIsShow')
			this.clearData()
		},

		// 新增或编辑
		addConfirm() {},

		edit(id, type) {
			if (type === '1') {
				this.headerList = this.listMsgPublic
			} else if (type === '2') {
				this.headerList = this.listMsgSepl
			}
			this.fundSysCode = id
			this.fundType = type
			getFundFile({ fundSysCode: id, fundRaiseType: type }).then(res => {
				if (res.msgCode === 'Y') {
					this.fileRenewApplyList = res.data.body
				}
			})
		},

		fileParams(type, id, date) {
			if (type === '盖章版') {
				return {
					sealedEffectiveDate: timerConversionDate(date), // 生效日期
					sealedFileId: id, // 文件ID
					sealedTDate: timerConversionDate(new Date()) // 上传日期
				}
			} else if (type === 'word版') {
				return {
					firstEffectiveDate: timerConversionDate(date),
					firstFileId: id,
					firstTDate: timerConversionDate(new Date())
				}
			} else if (type === 'PDF版') {
				return {
					finalEffectiveDate: timerConversionDate(date),
					finalFileId: id,
					finalTDate: timerConversionDate(new Date())
				}
			}
		}
	}
}
</script>
<style lang="scss" scoped >
.updateClass {
	display: flex;
}
.updateClass > div {
	margin-right: 16px;
}
</style>
